@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

$color:#ff9344;
.web {
    section {
        .lunbo_box {
            height: r(188);
            overflow: hidden;
            .lunbotu {
                width: 100%;
                overflow-x: auto;
                height: r(228);
                ul {
                    height: r(188);
                    width: 450%;
                    background-color: white;
                    text-align: center;
                    padding-left: r(18);
                    transition: all 0.5s;
                    li {
                        width: r(150);
                        margin-right: r(36);
                        p:nth-of-type(1) {
                            width: r(150);
                            height: r(150);
                            overflow: hidden;
                            img {
                                width: 100%;
                            }
                        }
                        p{
                            font-size: r(32);
                            
                        }
                    }
                }
            }
        }
        #food:checked~.lunbo_box .lunbotu ul {
            margin-left: 0%;
        }
        #movie:checked~.lunbo_box .lunbotu ul {
            margin-left: -100%;
        }
        #sport:checked~.lunbo_box .lunbotu ul {
            margin-left: -200%;
        }
        #sing:checked~.lunbo_box .lunbotu ul {
            margin-left: -300%;
        }
        
        #food:checked~.control label .yuan1 {
            color: $color;
        }
        #movie:checked~.control label .yuan2 {
            color: $color;
        }
        #sport:checked~.control label .yuan3 {
            color: $color;
        }
        #sing:checked~.control label .yuan4 {
            color: $color;
        }
        .control {
            text-align: center;
            margin-top: r(16);
            width: 50%;
            position: absolute;
            left: 40%;
            top: r(121);
            transform: translateX(-40%);
            .ct_yuan {
                color: #ffc9a1;
            }
        }
        .banner {
            margin-top: r(50);
            .type_icon {
                color: black;
            }
        }
        .type_img {
            margin-top: r(36);
            div {
                width: r(132);
                height: r(132);
                margin: 0 r(24);
                img {
                    width: 100%;
                }
            }
        }
    }
}